import React, { Component } from 'react';
import { View, StyleSheet, Image, Text, ViewPropTypes, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
export default class ImageBoxS2 extends Component {
    render() {
        return (
            <View style={[styles.container, styles.size, this.props.style]}>
                {!this.props.imageSource ?
                    <View style={styles.content}>
                        <TouchableOpacity activeOpacity={0.5} onPress={() => {
                            this.props.onPress && this.props.onPress();
                        }}>
                            <Image style={styles.image} source={this.props.hintImage ? this.props.hintImage : require('./ic_capture.png')} />
                        </TouchableOpacity>
                        <Text style={styles.hint}>{this.props.hintText ? this.props.hintText : '请选择或拍摄行驶证正本照片'}</Text>
                    </View> :
                    <View style={styles.size}>
                        <Image style={styles.size} source={this.props.imageSource} resizeMode='stretch' />
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={() => {
                                this.props.onPress && this.props.onPress();
                            }}
                            style={styles.reHintContent}>
                            <Text style={styles.reHint}>{this.props.reChooseText ? this.props.reChooseText : '重新识别'}</Text>
                        </TouchableOpacity>
                    </View>
                }
            </View>
        );
    }
}
ImageBoxS2.propTypes = {
    style: ViewPropTypes.style,//样式
    hintImage: PropTypes.number,//提示图片
    hintText: PropTypes.string,//提示文字
    imageSource: PropTypes.number,//图片资源 如 require('@/images/linggeche/insurance_img.png')
    reChooseText: PropTypes.string,//重新选择提示文字
    onPress: PropTypes.func,//按钮点击回调
}
const styles = StyleSheet.create({
    size: {
        height: 198,
        width: 335,
    },
    container: {
        backgroundColor: '#F6F6F6',
        borderRadius: 6,
        borderColor: '#eeeeee',
        borderWidth: 1,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center'
    },
    content: {
        alignItems: 'center',
    },
    image: {
        width: 60,
        height: 60
    },
    hint: {
        color: '#666666',
        fontSize: 15,
        marginTop: 12
    },
    reHintContent: {
        position: 'absolute',
        bottom: 0,
        borderBottomLeftRadius: 6,
        borderBottomRightRadius: 6,
        backgroundColor: 'rgba(0,0,0,0.4)',
        alignItems: 'center',
        justifyContent: 'center',
        width: 335,
        height: 35,
    },
    reHint: {
        fontSize: 15,
        color: '#ffffff'
    }
});